<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="6" v-for="item in statsCards" :key="item.title">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon" :style="{ backgroundColor: item.color }">
              <el-icon><component :is="item.icon" /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ item.value }}</div>
              <div class="stats-title">{{ item.title }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 快捷操作 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>快捷操作</span>
          </template>
          <div class="quick-actions">
            <el-button
              v-for="action in quickActions"
              :key="action.name"
              :type="action.type"
              :icon="action.icon"
              @click="handleQuickAction(action.path)"
              class="action-btn"
            >
              {{ action.name }}
            </el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 最近操作 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>最近操作</span>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="activity in recentActivities"
              :key="activity.id"
              :timestamp="activity.timestamp"
              :type="activity.type"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 系统公告 -->
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>系统公告</span>
          </template>
          <el-table :data="announcements" style="width: 100%">
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="type" label="类型" width="100">
              <template #default="{ row }">
                <el-tag :type="getAnnouncementType(row.type)">{{ row.type }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="publishTime" label="发布时间" width="180" />
            <el-table-column label="操作" width="100">
              <template #default="{ row }">
                <el-button type="text" @click="viewAnnouncement(row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 统计卡片数据
const statsCards = ref([
  {
    title: '总人口数',
    value: '1,234,567',
    icon: 'UserFilled',
    color: '#409EFF'
  },
  {
    title: '户籍人口',
    value: '987,654',
    icon: 'House',
    color: '#67C23A'
  },
  {
    title: '流动人口',
    value: '246,913',
    icon: 'Position',
    color: '#E6A23C'
  },
  {
    title: '今日办件',
    value: '156',
    icon: 'Document',
    color: '#F56C6C'
  }
])

// 快捷操作
const quickActions = ref([
  { name: '家庭立户', path: '/household/register', type: 'primary', icon: 'Plus' },
  { name: '出生申报', path: '/household/birth', type: 'success', icon: 'Avatar' },
  { name: '综合查询', path: '/household/query', type: 'info', icon: 'Search' },
  { name: '证件办理', path: '/certificate/id-card', type: 'warning', icon: 'CreditCard' }
])

// 最近操作
const recentActivities = ref([
  {
    id: 1,
    content: '张三 办理了身份证换领业务',
    timestamp: '2024-01-15 14:30',
    type: 'primary'
  },
  {
    id: 2,
    content: '李四 完成了出生申报',
    timestamp: '2024-01-15 13:45',
    type: 'success'
  },
  {
    id: 3,
    content: '王五 申请了户口迁移',
    timestamp: '2024-01-15 12:20',
    type: 'info'
  },
  {
    id: 4,
    content: '赵六 办理了居住证续期',
    timestamp: '2024-01-15 11:10',
    type: 'warning'
  }
])

// 系统公告
const announcements = ref([
  {
    id: 1,
    title: '关于系统维护的通知',
    type: '系统通知',
    publishTime: '2024-01-15 09:00'
  },
  {
    id: 2,
    title: '新版身份证办理流程说明',
    type: '业务公告',
    publishTime: '2024-01-14 16:30'
  },
  {
    id: 3,
    title: '春节期间服务安排',
    type: '重要通知',
    publishTime: '2024-01-13 10:15'
  }
])

// 快捷操作处理
const handleQuickAction = (path) => {
  router.push(path)
}

// 获取公告类型样式
const getAnnouncementType = (type) => {
  const typeMap = {
    '系统通知': 'info',
    '业务公告': 'success',
    '重要通知': 'danger'
  }
  return typeMap[type] || 'info'
}

// 查看公告
const viewAnnouncement = (announcement) => {
  ElMessage.info(`查看公告：${announcement.title}`)
}
</script>

<style lang="scss" scoped>
.dashboard {
  .stats-card {
    .stats-content {
      display: flex;
      align-items: center;
      
      .stats-icon {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        
        .el-icon {
          font-size: 24px;
          color: white;
        }
      }
      
      .stats-info {
        flex: 1;
        
        .stats-number {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
          margin-bottom: 4px;
        }
        
        .stats-title {
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }
  
  .quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    
    .action-btn {
      height: 50px;
      font-size: 14px;
    }
  }
}
</style>